<template>
  <transition mode="out-in" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <div id="LetterView">
      <!-- 头部菜单栏 -->
      <!--<HomeHead :selectBtn="selectBtn"></HomeHead>-->
      <!-- 内容区域 -->
      <div class="content_box_out">
        <div class="content_box">
          <!-- 消息列表区域 -->
          <div class="meg_content">
            <!-- 返回 -->
            <div class="back">
              <router-link to="/letter" class="back_text">返回</router-link>
            </div>
            <!-- 发送给 -->
            <div class="sendto">
              <div class="nametext">发私信给 {{ username }}:</div>
            </div>
            <!-- 输入框 -->
            <div class="input_box">
              <Input v-model="inputReply" placeholder="Enter something..." style="width: 600px" />
            </div>
            <!-- 发送按钮 -->
            <div class="btn_box">
              <Button type="primary" @click="replay">发送</Button>
            </div>
            <ViewContent v-for="(i, index) in viewList" :key="index" :viewlist="i"></ViewContent>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import ViewContent from './ViewContent'
  export default {
    name: 'LetterView',
    inject: ['reload'],
    components: {
      'ViewContent': ViewContent
    },
    data () {
      return {
        selectBtn: 2,
        modal1: false,
        viewList: [],
        inputReply: ''
      }
    },
    props: ['list'],
    computed: {},
    methods: {
      replay () {
        this.dialogFormVisible = false
        // 数据判断为空
        if (this.inputReply.length === 0) {
          this.$Message.error('回复不可为空!')
        } else {
          // 写回复
          this.axios.get('/api/addLetter', {
            params: {
              phone: sessionStorage.getItem('phone'),
              // fromid: this.viewList.uid,
              fromid: 3,
              content: this.inputReply
            }
          })
            .then((response) => {
              if (response.data.code === 200) {
                this.$Message.success('回复成功!')
                // this.list.push(this.list)
                this.reload()
              } else {
                this.$Message.error('回复失败!')
              }
            })
            .catch((error) => {
              this.$Notice.error({
                title: '通知',
                desc: '接口，异常！'
              })
              console.info(error)
            })
        }
      }
    },
    created () {
      this.ids = this.$route.params.ids
      this.username = this.$route.params.username
      this.axios.get('/api/findLetterWith', {
        params: {
          phone: sessionStorage.getItem('phone'),
          fromID: this.ids
        }
      })
        .then(res => {
          this.viewList = res.data.data
          console.log(res.data.data)
        })
    }/*,
      getLetterData () {
        this.axios.get('/api/findNearLetter', {
          params: {
            phone: sessionStorage.getItem('phone'),
            fromid: this.ids
          }
        })
          .then(res => {
            this.viewList = res.data.data
          })
      } */
  }
</script>

<style scoped>
  @import '../../../../../static/css/letter/LetterView.css';
</style>
